<template>
  <el-breadcrumb separator="/">
    <el-breadcrumb-item
      v-for="item in breadcrumbList"
      :key="item.path"
      :to="getPath(item)"
    >
      <span>{{ item.meta.title }}</span></el-breadcrumb-item
    >
  </el-breadcrumb>
</template>

<script setup lang="ts">
import { ElBreadcrumb, ElBreadcrumbItem } from "element-plus";
import { useRoute } from "vue-router";
import type { RouteLocationMatched } from "vue-router";

import { computed } from "vue";

defineOptions({
  name: "Breadcrumb",
});

const currentRoute = useRoute();

/** 获取路由路径 */
const getPath = (item: RouteLocationMatched): string | Object => {
  if (!item) return "";
  if (item.meta?.isReadonlyBreadcrumb) return "";
  return { path: item.redirect ? item.redirect : item.path };
};

/** 面包屑列表 */
const breadcrumbList = computed(() =>
  currentRoute.matched.filter((item) => !item.meta.isHideBreadcrumb)
);

</script>
